<template>
    <view class="uni-container">
        <view class="wallet">
            <view class="user">
                <view class="left">
                    <image :src="State.user.avatar" class="img" mode="aspectFill"></image>
                </view>
                <view class="center">{{State.user.nickname}}</view>
                <view class="right" @click="Common.toUrl('/pages/user/wallet/LogList?transactionType=4')">
                    提现记录
                    <uni-icons type="right" size="14" color="#FFF"></uni-icons>
                </view>
            </view>

            <view class="money">
                <view class="left">
                    <view class="word">余额（元）</view>
                    <view class="num">¥ {{ State.user.accountBalance }}</view>
                </view>
                <view class="right">
                    <view @click="toWithdrawDeposit()">申请提现</view>
                </view>
            </view>
            <view class="earnings">
                <view class="left">累计收益：<text>¥0.00</text></view>
                <view class="right" @click="Common.toUrl('/pages/user/wallet/LogList?transactionType=3')">
                    收益明细
                    <uni-icons type="right" size="14" color="#FFF"></uni-icons>
                </view>
            </view>
        </view>

        <view class="box" style="padding-top:0px; padding-bottom:0px;">
            <uni-list :border="false">
                <uni-list-item @click="Common.toUrl('/pages/user/wallet/PayAgency',true)" :clickable="true"
                               title="我的等级" :rightText="State.user.vipGradeName+'会员'" :show-extra-icon="true"
                               showArrow >
                    <template v-slot:header>
                        <uni-icons custom-prefix="iconfont"
                                   type="iconfont-dengji"
                                   size="22"
                                   :color="Config.UNI_GLOBAL_COLOR"
                                   style="margin-right:9px">
                        </uni-icons>
                    </template>
                </uni-list-item>
                <uni-list-item @click="Common.toUrl('/pages/user/wallet/InviteList',true)" :clickable="true"
                               title="我的邀请" :rightText="teamData.inviteNum+'人'" :show-extra-icon="true"
                               showArrow :extra-icon="extraIconPerson" />
							   
			   <!-- <uni-list-item @click="Common.toUrl('/pages/user/wallet/TeamList',true)" :clickable="true"
							  title="团队充值" :rightText="teamData.vipMoney"
							  :show-extra-icon="true"
							  showArrow :extra-icon="extraIconWallet"/> -->

                <!-- <uni-list-item @click="Common.toUrl('/pages/user/wallet/TeamList',true)" :clickable="true"
                               title="团队人数" :rightText="teamData.teamNum+'人'" :show-extra-icon="true"
                               showArrow :extra-icon="extraIconStaff" /> -->

                

<!--                <uni-list-item @click="Common.toUrl('/pages/user/Report',true)" :clickable="true"-->
<!--                               title="奖励机制(含提现规则)" rightText="查看" :show-extra-icon="true"-->
<!--                               showArrow>-->
<!--                    <template v-slot:header>-->
<!--                        <uni-icons custom-prefix="iconfont"-->
<!--                                   type="iconfont-zongjine"-->
<!--                                   size="22"-->
<!--                                   :color=Config.UNI_GLOBAL_COLOR-->
<!--                                   style="margin-right:9px">-->
<!--                        </uni-icons>-->
<!--                    </template>-->
<!--                </uni-list-item>-->
            </uni-list>
        </view>

        <view class="box tuiguang">
            <view class="tit">推广方法</view>
            <uni-list style="margin-top:10px;">
                <uni-list-item :clickable="true"
                               :show-extra-icon="true"
                               :extra-icon="extraIconTime"
                               title="分享推广海报"
                >
                    <template v-slot:header>
                        <view class="num" style="background: #D2E9B5;">1</view>
                    </template>
                    <template v-slot:footer>
                        <view @click="Common.toUrl('/pages/user/wallet/SharePoster')" class="uni-btn btn">去推广</view>
                    </template>
                </uni-list-item>
                <uni-list-item :clickable="true"
                               :show-extra-icon="true"
                               :extra-icon="extraIconTime"
                               title="分享小程序"
                >
                    <template v-slot:header>
                        <view class="num" style="background: #AEE9F5;">2</view>
                    </template>
                    <template v-slot:footer>
						<button open-type="share" class="uni-btn btn">
							去推广
						</button>
                    </template>
                </uni-list-item>
            </uni-list>
        </view>

        <view class="explain">
            <view class="tit">奖励金说明</view>
            <view class="ul">
                <view class="li">
                	<view class="l">•</view>
                	<view class="r">提现仅限VIP用户，余额满50元即可申请提现，每次申请提现的金额不超过500元。</view>
				</view>
				<view class="li">
					<view class="l">•</view>
					<view class="r">按照相关规定，申请提现需要填写个人信息，以便申报个人所得税。</view>
				</view>
				<view class="li">
					<view class="l">•</view>
					<view class="r">每周五统一处理提现申请，代理用户请在周五前申请提现。</view>
				</view>
				<view class="li">
					<view class="l">•</view>
					<view class="r">每月累计提现金额超过800元，将扣除个人所得税，税率20%。</view>
				</view>
				<view class="li">
					<view class="l">•</view>
					<view class="r">提现申请通过后，将打款至填写的银行账户。</view>
				</view>
				<view class="li">
					<view class="l">•</view>
					<view class="r">你每邀请一名好友完成付费，将获得{{State.user.agencyGradeRate}}%奖励。</view>
				</view>
            </view>
        </view>
    </view>
</template>

<script>
import { UserApi } from '@/api/user/UserApi'
// import { WxMiniShareData } from '@/utils/share/WxMiniShareData'
export default {
    data() {
        return {
			Config: this.$Config,
			Common: this.$Common,
			Auth: this.$Auth,
			ShareUtil: this.$ShareUtil,
			State: this.$store.state,
			Dict: this.$Dict,

            extraIconTime: {
                color: this.$Config.UNI_GLOBAL_COLOR,
                size: '22',
                type: 'calendar'
            },
            extraIconPerson: {
                color: this.$Config.UNI_GLOBAL_COLOR,
                size: '22',
                type: 'person'
            },
            extraIconStaff: {
                color: this.$Config.UNI_GLOBAL_COLOR,
                size: '22',
                type: 'staff'
            },
            extraIconWallet: {
                color: this.$Config.UNI_GLOBAL_COLOR,
                size: '22',
                type: 'wallet'
            },
            teamData:{
                inviteNum:0,
                vipNum:0,
                vipMoney:0.00,
                teamNum:0,
            }
        }
    },
    computed: {},
    onLoad() {
		console.log('aaaa',this.State.user)
        this.statisticsTeamData()
    },
    onNavigationBarButtonTap() {
        uni.navigateTo({
            url: "/pages/user/wallet/LogList"
        });
    },
    onPullDownRefresh() {
        this.$store.dispatch('user/getInfo')
        this.statisticsTeamData()
    },
	onShareAppMessage(res) {
		// return WxMiniShareData
	},
    methods: {
        statisticsTeamData(){
            if(this.Auth.isLogin()) {
                UserApi.statisticsTeamData().then((response) => {
                    this.teamData = response

                    this.teamData.vipMoney = (this.teamData.vipMoney?(this.teamData.vipMoney / 100):'0.00')+'元'
                })
            }
        },
        toWithdrawDeposit(){
            if(this.State.user.accountBalance < 50){
                uni.showToast({
                    title: '可提现余额不足，最低50元可提现',
                    icon: 'none'
                });
                return false
            }
			console.log('44444444444')
            this.Common.toUrl('/pages/user/wallet/WithdrawDeposit',true)
        }
    }
}
</script>

<style lang="scss" scoped>
page{background: #FFFFFF; background: linear-gradient(to bottom, #F8F8F8, #F8F8F8);}
.wallet{ border-radius: 10px; background: linear-gradient(to right, $uni-global-color, #A0D289);}
.wallet .user{ display: flex; padding:15px; justify-content: space-between; align-items: center;}
.wallet .user .left{ width:30px; height:30px; }
.wallet .user .left .img{ width:30px; height:30px; border-radius: 20px;}
.wallet .user .center{ color:#FFF; flex: 1; padding-left:10px;}
.wallet .user .right{ color:#FFF; font-size: 14px;}
.wallet .money{ display: flex; padding:0 15px;justify-content: space-between; align-items: center; }
.wallet .money .left .word{ color:#FFF; font-size: 12px; }
.wallet .money .left .num{ color:#FFF; font-size: 28px; font-weight: bold; margin-top:10px;}
.wallet .money .right view{ background: #FFF; border-radius: 20px; color:#D5BAE7; padding:5px 10px; font-size: 14px; }
.wallet .earnings{ display: flex; background: rgba(255,255,255,0.3); padding:10px 15px;
    justify-content: space-between; margin-top:10px;}
.wallet .earnings .left{ font-size: 14px; color:#FFF;}
.wallet .earnings .right{ font-size: 14px; color:#FFF;}

.box{ border-radius: 10px; padding:10px; background:#FFF; margin-top:15px;}
.tuiguang .num{ width:30px; height:30px; line-height: 30px; border-radius: 100%; color:#FFF; background: #0000ff;
                text-align: center; margin-right:10px; }
.tuiguang .btn{ padding:0 10px;font-size: 14px;height:30px; line-height: 30px; }

::v-deep .uni-list-item__container{ padding-left:0px; padding-right:0px;}
::v-deep .uni-icon-wrapper{padding-right:0px;}

.explain{ margin-top:20px;}
.explain .tit{}
.explain .ul{ }
.explain .ul .li{  margin-top:10px;display: flex;}
.explain .ul .li .l{width:15px;font-size: 14px; color:#999;line-height: 24px;}
.explain .ul .li .r{flex:1;font-size: 14px; color:#999;line-height: 24px;}



</style>
